<template>
	<view>

		<view class="OuterBox">

			<template v-if="pageobj.list">
				<view class="heupItem InnerBox" v-for="(item, index) in pageobj.list">
					<view class="heup_top FlexBetween">
						<view class="hleft FlexAlign">
							<view class="title line-1">
								{{item.title}}
							</view>
							<view class="def_label FlexRow" v-if="item.is_def">
								默认
							</view>
						</view>
						<view class="hright">
							<view class="type_label FlexRow" :class="'type' + item.title_type">
								<div class="type_Txt line-1">
									{{item.type_desc || ''}}
								</div>

							</view>
						</view>
					</view>

					<view class="heup_content">
						<view class="heup_txt">
							联系电话 {{item.mobile || ''}}
						</view>
						<view class="heup_txt">
							抬头类型 {{item.title_type_desc || ''}}
						</view>
						<view class="heup_txt" v-if="item.title_type == 1">
							企业税号 {{item.duty_num || ''}}
						</view>
					</view>

					<view class="heup_bottom FlexBetween">
						<view></view>
						<view class="operate FlexAlign">
							<view class="operaBtn FlexRow" @click="operaClick(1, item)">
								<i class="iconfont icon-bianji"></i>
								编辑
							</view>
							<view class="operaBtn FlexRow" @click="operaClick(2, item)">
								<i class="iconfont icon-bingji" style="font-size: 26rpx;"></i>
								删除
							</view>
						</view>
					</view>

				</view>
			</template>
			<template v-else>
				<!-- <nodata></nodata> -->
			</template>

		</view>


		<view class="pagesticky">
			<view class="defconfirm_btn gradient_bg4" @click="createNewData">
				<i class="iconfont icon-a-lujing21"></i>
				添加新抬头
			</view>
		</view>

	</view>
</template>

<script>
	import {
		api_invoice_list,
		api_invoice_del,
		api_invoice_config,
	} from "@/api/xtcapi/invoice.js"
	import {
		datalistMixins
	} from "@/mixins/datalist.js";
	// import nodata from "@/bundle4/components/content/nodata.vue"

	export default {
		mixins: [datalistMixins],
		components: {
			// nodata,
		},
		data() {
			return {
				pageobj: {
					page_no: 1, // 	Integer	当前页码
					page_size: 10, // 	Integer	每页显示条数
					page_total: 0,
					list: [],
					initial: true,
				},
			}
		},
		onLoad() {

		},
		onShow() {

			this.initialization()
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.initialization()
		},
		methods: {
			initialization() {
				// 请求列表数据
				this.InsituRefresh()

			},
			getDatasList() {
				let {
					page_no,
					page_size,
				} = this.pageobj
				let data = {

					type: [0, 1, 2],
					title_type: [0, 1],

					page_no,
					page_size,
				}
				api_invoice_list(data).then(res => {
					console.log('res', res)
					this.def_handleDatas(res)
				})
			},
			// 操作
			operaClick(flag, item) {
				let {
					id
				} = item
				if (flag == 1) { // 編輯
					this.DetailClick(id)
				} else if (flag == 2) { // 刪除
					uni.showModal({
						title: '提示',
						content: `确定要删除【${item.title}】?`,
						success: (res) => {
							if (res.confirm) {
								this.operadelData(id)
							}
						}
					})
				}
			},
			// 删除
			operadelData(id) {
				api_invoice_del({
					id
				}).then(res => {
					this.$toast({
						title: '删除成功',
					})
					this.InsituRefresh()
				})
			},
			// 编辑
			DetailClick(id) {
				uni.navigateTo({
					url: `/bundle4/pages/invoice/headup/addheaval?id=${id}`
				})
			},
			// 新建
			createNewData() {
				uni.navigateTo({
					url: '/bundle4/pages/invoice/headup/addheaval'
				})
			},
		},

	}
</script>

<style lang="scss" scoped>
	@import "@/bundle4/css/Flex.scss";

	.defconfirm_btn {
		i {
			font-size: 28rpx;
			color: #E6FF28;
			margin-right: 22rpx;
		}
	}

	.heupItem {

		// min-height: 240rpx;
		padding: 25rpx 35rpx;

		.heup_top {
			width: 100%;
			margin-bottom: 20rpx;

			.hleft {
				.title {
					max-width: 300rpx;
					font-size: 32rpx;
					font-weight: 700;
					color: rgba(38, 38, 38, 1);
					text-align: left;
				}

				.def_label {
					width: 56rpx;
					height: 32rpx;
					border-radius: 4rpx;
					border: 2rpx solid rgba(212, 48, 48, 1);
					margin-left: 12rpx;
					font-size: 20rpx;
					font-weight: 400;
					color: rgba(212, 48, 48, 1);
					text-align: center;

				}
			}

			.hright {
				.type_label {
					min-width: 180rpx;
					height: 48rpx;
					border-radius: 8rpx;
					font-size: 24rpx;
					font-weight: 400;
					padding: 0 15rpx;
					text-align: center;

					.type_Txt {
						max-width: 240rpx;
					}

					&.type0 {
						color: rgba(214, 144, 39, 1);
						background: rgba(255, 247, 230, 1);

					}

					&.type1 {
						color: #EE0A25;
						background: #FEEDF0;
					}
				}
			}
		}

		.heup_content {
			.heup_txt {

				font-size: 24rpx;
				font-weight: 400;
				color: rgba(102, 102, 102, 1);
				text-align: left;
				line-height: 38rpx;
			}
		}

		.heup_bottom {
			width: 100%;
			padding-top: 20rpx;

			.operate {
				.operaBtn {
					margin-left: 45rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(38, 38, 38, 1);
					text-align: left;

					i {
						margin-right: 8rpx;
						color: #262626;
						font-size: 30rpx;
					}
				}
			}
		}
	}
</style>